<template>
	<view style="background-color:#FFF;">
		<fui-form-item label="真实姓名" labelSize="26">
			<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入您的真实姓名" textRight
				v-model="formData.uname"></fui-input>
		</fui-form-item>
		<fui-form-item label="身份证号" labelSize="26">
			<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入15位或18位身份证号" textRight
				v-model="formData.idcard"></fui-input>
		</fui-form-item>
		<view>
			<view class="padding-all-30">上传身份证照片</view>
			<view class="flexbc" style="padding:40rpx;">
				<view style="width:45vw;">
					<view style="width:300rpx;height:200rpx;background-color:#f0f0f0;border-radius:20rpx;">
						<uni-file-picker limit="1" :del-icon="false" disable-preview file-mediatype="image"
							v-model="IDCardFront" @fail="IDCardFrontError" @select="uploadIDCardFront"
							:image-styles="imageStyles">+</uni-file-picker>
					</view>
					<view style="padding:10rpx;text-align:center;">点击上传身份证正面</view>
				</view>
				<view style="width:45vw;">
					<view style="width:300rpx;height:200rpx;background-color:#f0f0f0;border-radius:20rpx;">
						<uni-file-picker limit="1" :del-icon="false" disable-preview file-mediatype="image"
							v-model="IDCardBack" @fail="IDCardBackError" @select="uploadIDCardBack"
							:image-styles="imageStyles">+</uni-file-picker>
					</view>
					<view style="padding:10rpx;">点击上传身份证背面</view>
				</view>
			</view>
		</view>
		<view>
			<view style="padding:30rpx;">日常生活照片</view>
			<view style="padding:30rpx;">
				<uni-file-picker limit="3" :del-icon="true" disable-preview file-mediatype="image" v-model="lifePhotos"
					@fail="error" @select="uploadPic"
					style="width: 200rpx; height: 200rpx; background-color:#CCC;border-radius:200rpx;">+</uni-file-picker>
			</view>
		</view>
		<view>
			<button class="submitBtn" @click="submitHandle">提交认证</button>
		</view>
		<view style="padding:30rpx;text-align:center;color:#FF6600">实名信息已加密，仅用于匹配认证</view>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				formData: {
					uname: '',
					idcard: '',
					idcardFront: '',
					idcardBack: '',
					lifePhotos: []
				},
				imageStyles: {
					"height": 110, // 边框高度
					"width": 160, // 边框宽度
					"border": false
					// { // 如果为 Boolean 值，可以控制边框显示与否
					// 	"color":"#eee",		// 边框颜色
					// 	"width":"1px",		// 边框宽度
					// 	"style":"solid", 	// 边框样式
					// 	"radius":"10rpx" 		// 边框圆角，支持百分比
					// }
				},
				IDCardFront: [],
				IDCardBack: [],
				lifePhotos: []
			};
		},
		onLoad() {
			this.getMyInfo()
		},
		methods: {
			getMyInfo() {
				this.$httpost('/UserCenter/myinfo', {}).then(res => {
					// console.log('myinfo', res)
					if (res.code == 200) {
						this.userInfo = res.data.UserInfo
						// this.formData.uname = res.data.UserInfo.TrueName
						// this.formData.idcard = res.data.UserInfo.UserIDCard
						// this.formData.idcardFront = res.data.UserInfo.IDCardFront

						if (res.data.UserInfo.IDCardFront !== null) {
							let IDCardFront = {
								"name": res.data.UserInfo.IDCardFront.replace(
									'https://api.meimo.comdns.cn/public/upload/uniapp/UserAuth/', ''),
								"extname": ".jpg",
								"url": res.data.UserInfo.IDCardFront
							}

							this.IDCardFront.push(IDCardFront)
						}
						// this.formData.idcardBack = res.data.UserInfo.IDCardBack

						// console.log('res.data.UserInfo.IDCardBack', res.data.UserInfo.IDCardBack)

						if (res.data.UserInfo.IDCardBack !== null) {
							let IDCardBack = {
								"name": res.data.UserInfo.IDCardBack.replace(
									'https://api.meimo.comdns.cn/public/upload/uniapp/UserAuth/', ''),
								"extname": ".jpg",
								"url": res.data.UserInfo.IDCardBack
							}

							this.IDCardBack.push(IDCardBack)
						}

						if (res.data.UserInfo.lifePhotos !== null) {

							this.formData.lifePhotos = JSON.parse(res.data.UserInfo.lifePhotos);

							for (var i = 0; i < this.formData.lifePhotos.length; i++) {

								let lifePhoto = {
									"name": this.formData.lifePhotos[i].replace(
										'https://api.meimo.comdns.cn/public/upload/uniapp/UserAuth/', ''),
									"extname": ".jpg",
									"url": this.formData.lifePhotos[i]
								}

								this.lifePhotos.push(lifePhoto)
							}
						}
					}
				});
			},
			uploadPic(e) {
				// console.log('生活照上传：',e)
				this.lifePhotos.push(e.tempFiles[0])
			},
			error(e) {
				// console.log('生活照上传失败：',e)
			},
			uploadIDCardFront(e) {
				// console.log('身份证正面上传', e)
				this.IDCardFront = e.tempFiles
			},
			IDCardFrontError(e) {
				// console.log('身份证正面上传失败：',e)
			},
			uploadIDCardBack(e) {
				// console.log('身份证背面上传',e)
				this.IDCardBack = e.tempFiles
			},
			IDCardFrontError(e) {
				// console.log('身份证背面上传失败：',e)
			},
			submitHandle() {

				let _that = this;

				if (this.formData.uname == '') {
					this.$common.showToast("请填写真实姓名！");
					return false;
				}
				if (this.formData.idcard == '') {
					this.$common.showToast("请填写身份证号！");
					return false;
				}
				if (this.IDCardFront == 0) {
					this.$common.showToast("请上传身份证正面！");
					return false;
				}
				if (this.IDCardBack == 0) {
					this.$common.showToast("请上传身份证背面！");
					return false;
				}

				// console.log('this.IDCardFront', this.IDCardFront[0].url.split("://"))

				if (this.IDCardFront.length !== 0 && this.IDCardFront[0].url.split("://")[0] !== 'https') {
					uni.uploadFile({
						url: this.$imgUpload + '/UserAuth&type=image', //仅为示例，非真实的接口地址
						filePath: this.IDCardFront[0].path,
						name: "file",
						// files: tempFilePaths,
						formData: {},
						success: (uploadFileRes) => {
							// console.log('IDCardFront', uploadFileRes);

							let ResData = JSON.parse(uploadFileRes.data);

							this.formData.idcardFront = this.$baseUrl + ResData.fileName;

							_that.upIDCardBack()
						}
					});
				} else {
					_that.upIDCardBack()
				}


			},
			upIDCardBack() {
				let _that = this;

				if (this.IDCardBack.length !== 0 && this.IDCardBack[0].url.split("://")[0] !== 'https') {
					uni.uploadFile({
						url: this.$imgUpload + '/UserAuth&type=image', //仅为示例，非真实的接口地址
						filePath: this.IDCardBack[0].path,
						name: "file",
						// files: tempFilePaths,
						formData: {},
						success: (uploadFileRes) => {
							// console.log('IDCardBack', uploadFileRes);

							let ResData = JSON.parse(uploadFileRes.data);
							this.formData.idcardBack = this.$baseUrl + ResData.fileName;
							_that.uplifephoto()
						}
					});
				} else {
					_that.uplifephoto()
				}
			},
			uplifephoto() {
				let _that = this;

				if (this.lifePhotos.length !== 0 && this.lifePhotos[0].url.split("://")[0] !== 'https') {
					for (var i = 0; i < this.lifePhotos.length; i++) {
						uni.uploadFile({
							url: this.$imgUpload + '/UserLife&type=image', //仅为示例，非真实的接口地址
							filePath: this.lifePhotos[i].path,
							name: "file",
							// files: tempFilePaths,
							formData: {},
							success: (uploadFileRes) => {
								// console.log('UserLife', uploadFileRes);

								this.formData.lifePhotos = [];

								let ResData = JSON.parse(uploadFileRes.data);

								this.formData.lifePhotos.push(this.$baseUrl + ResData.fileName);

								if (this.formData.lifePhotos.length == this.lifePhotos.length) {
									_that.saveAuth()
								}
							}
						});
					}
				} else {
					_that.saveAuth()
				}
			},
			saveAuth() {

				// console.log('this.formData', this.formData)

				this.$httpost('/UserAction/saveUserAuth', {
					formData: this.formData
				}).then(AuthRes => {
					// console.log('AuthRes', AuthRes)

					if (AuthRes.code == 200) {

						if (AuthRes.data.ActionLogID === 0) {
							uni.showModal({
								title: '信息核验未通过，请输入和上传真实有效的信息',
								showCancel: false,
								success: (res) => {}
							})
						} else {
							const Wallet = AuthRes.data.Wallet

							uni.showModal({
								title: '认证提交成功！请等待审核',
								showCancel: false,
								success: (res) => {
									if (Wallet.WalletID !== 0) {
										let options = {}
										options.text = '恭喜您获得 ' + Math.round(Wallet.WalletMoney) +
											' 金币';
										options.src = this.$baseUrl + "icon/goldcoin.png";
										this.$refs.toast.show(options)
									}
									setTimeout(function() {
										uni.navigateBack()
									}, 2000)
								}
							})


						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.submitBtn {
		width: 90vw;
		background-color: $globalColor;
		color: #000
	}

	.file-picker__progress {
		display: none;
	}
</style>